feat: add fitHeight param (#146)

Author: eugeneshulga869

apps/csk-marketing-site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-marketing-site",
-  "version": "6.0.84",
+  "version": "6.0.85",
   "private": true,
   "engines": {
     "yarn": "please-use-npm",

apps/csk-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/csk-storybook",
-  "version": "6.0.84",
+  "version": "6.0.85",
   "description": "CSK vNext Storybook is an interactive Storybook build showcasing components from the CSK vNext component starter kit. It provides detailed documentation, live previews, and testing capabilities for easy integration into your projects.",
   "main": "index.js",
   "scripts": {

apps/csk-storybook/src/stories/canvas/components/Card.stories.tsx

@@ -81,6 +81,7 @@ export const Default: Story = createStory({
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
   },
   content: cardDefault,
 });

apps/csk-storybook/src/stories/canvas/components/Carousel.stories.tsx

@@ -59,6 +59,7 @@ export const Default: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
     itemsPerPage: '1',
   },
   argTypes,
@@ -71,6 +72,7 @@ export const DefaultWithMultipleItems: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
     itemsPerPage: '3',
     gapX: '4',
   },
@@ -84,6 +86,7 @@ export const BrochureWithMultipleItems: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
     itemsPerPage: '3',
     gapX: '4',
   },
@@ -97,6 +100,7 @@ export const NumericWithMultipleItems: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
     itemsPerPage: '3',
     gapX: '4',
   },

apps/csk-storybook/src/stories/canvas/components/Container.stories.tsx

@@ -58,6 +58,7 @@ export const Default: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: false,
     fullHeight: false,
+    fitHeight: false,
   },
   argTypes,
   render: renderStory('Simple Container'),
@@ -69,6 +70,7 @@ export const FluidContainer: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
   },
   argTypes,
   render: renderStory('Fluid Container'),
@@ -80,6 +82,7 @@ export const FullHeightContainer: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: false,
     fullHeight: true,
+    fitHeight: false,
   },
   argTypes,
   render: renderStory('Full Height Container'),
@@ -101,6 +104,7 @@ export const WithSpacingContainer: Story = {
     },
     fluidContent: false,
     fullHeight: true,
+    fitHeight: false,
   },
   argTypes,
   render: renderStory('With Spacing Container'),

apps/csk-storybook/src/stories/canvas/components/FixedHero.stories.tsx

@@ -37,7 +37,7 @@ const meta: Meta<typeof DemoHero.FixedHero> = {
 export default meta;
 type Story = StoryObj<typeof DemoHero.FixedHero>;
 
-const { displayName, fullHeight } = ContainerArgTypes;
+const { displayName, fullHeight, fitHeight } = ContainerArgTypes;
 const { text, tag, color } = TextArgTypes;
 const { text: buttonText } = ButtonArgTypes;
 
@@ -51,6 +51,7 @@ const argTypes: Partial<ArgTypes<FixedHeroParameters>> = {
   textColor: color,
   enableOverlayAutoTint: { control: 'boolean' },
   fullHeight,
+  fitHeight,
 };
 
 const renderStory = (variant?: FixedHeroVariants) => (args: FixedHeroParameters) => {

apps/csk-storybook/src/stories/canvas/components/Flex.stories.tsx

@@ -44,6 +44,7 @@ export const Default: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: false,
     fullHeight: false,
+    fitHeight: false,
   },
   argTypes,
   render: (args: FlexParameters) => {

apps/csk-storybook/src/stories/canvas/components/Grid.stories.tsx

@@ -36,6 +36,7 @@ export const Default: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: false,
     fullHeight: false,
+    fitHeight: false,
   },
   argTypes,
   render: (args: GridParameters) => {

apps/csk-storybook/src/stories/canvas/components/ImageGallery.stories.tsx

@@ -29,6 +29,7 @@ export const Default: Story = {
     backgroundColor: 'text-secondary',
     fluidContent: true,
     fullHeight: false,
+    fitHeight: false,
   },
   argTypes,
   render: (args: ImageGalleryParameters) => {

apps/csk/content/component/accordion.yaml

@@ -20,6 +20,7 @@ parameters:
         - border
         - fluidContent
         - fullHeight
+        - fitHeight
   - id: backgroundColor
     name: Background Color
     type: dex-color-palette-parameter
@@ -48,6 +49,10 @@ parameters:
     name: Full Height
     type: checkbox
     typeConfig: null
+  - id: fitHeight
+    name: Fit Height
+    type: checkbox
+    typeConfig: null
 categoryId: 096fd5ed-5e2a-4bfa-834b-fb805d1d1ce9
 previewImageUrl: >-
   https://res.cloudinary.com/uniform-demos/image/upload/csk-v-next/baseline/preview-images/accordion.jpg