feat(get-started): new component (#5054)

* feat(get-started): new component

* fix(lint): update files

* fix(footer): typo

* fix(media): center align

* fix(getStarted): mobile and step to sequence

* fix(getStarted): move to jsx

* fix(getStarted): picture and font

* fix(getStarted): cleanup

* fix(getStarted): cleanup

* fix(story): update copy

* feat(get-started): add avt test

* fix(getStarted): update from review comments

* fix(get-started): resolve comments

* fix(get-started): use controls not argstable

* fix(get-started): add card to name

e2e/components/GetStartedCard/GetStartedCard-test.avt.e2e.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import { expect, test } from '@playwright/test';
+import { visitStory } from '../../test-utils/storybook';
+
+test.describe('GetStartedCard @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'GetStartedCard',
+      // cspell:disable-next-line
+      id: 'ibm-products-components-cards-getstartedcard--default',
+      globals: {
+        carbonTheme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'GetStartedCard @avt-default-state'
+    );
+  });
+});

examples/carbon-for-ibm-products/GetStartedCard/gallery.config.json

@@ -0,0 +1,12 @@
+{
+  "label": "Get-Started-Card",
+  "package-config": {
+    "flags": {
+      "component": {
+        "GetStartedCard": true
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

examples/carbon-for-ibm-products/GetStartedCard/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "GetStartedCard-component-example",
+  "note": "Run `update-gallery-config to generate."
+}

examples/carbon-for-ibm-products/GetStartedCard/src/Example/Example.jsx

@@ -0,0 +1,49 @@
+// cspell:words grafana
+
+import React from 'react';
+
+// ----------------------------------------------------
+// This is an example showing use of the
+// AboutModal component
+// from the @carbon/ibm-products component library.
+// ----------------------------------------------------
+
+import { GetStartedCard } from '@carbon/ibm-products';
+import { ArrowRight, Time, SkillLevelBasic } from '@carbon/react/icons';
+
+import './_example.scss';
+
+export const Example = () => {
+  const defaultProps = {
+    label: 'Label',
+    title: 'Title',
+    metaData: [
+      {
+        id: '1',
+        icon: () => <Time size={16} />,
+        iconDescription: 'Duration',
+      },
+      {
+        id: '2',
+        icon: () => <SkillLevelBasic size={16} />,
+        iconDescription: 'Level',
+      },
+    ],
+    footerActionIcon: () => <ArrowRight size={16}></ArrowRight>,
+    onClick: () => {},
+    step: 3,
+    status: 'incomplete'
+  };
+
+  return (
+    <FlexGrid>
+      <Row>
+        <Column sm={4} md={8} lg={4}>
+          <GetStartedCard {...defaultProps} />
+        </Column>
+      </Row>
+    </FlexGrid>
+  );
+};
+
+export default Example;

examples/carbon-for-ibm-products/GetStartedCard/src/Example/_example.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react/scss/spacing' as *;
+
+/* example SCSS */

packages/ibm-products-styles/src/components/GetStartedCard/_carbon-imports.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Import any Carbon component styles used from GetStartedCard in this file.
+// GetStartedCard uses the following Carbon components:

packages/ibm-products-styles/src/components/GetStartedCard/_get-started-card.scss

@@ -0,0 +1,135 @@
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class}__get-started {
+  border-width: 1px;
+  border-style: solid;
+  background: linear-gradient(to bottom, $purple-80 40%, $purple-70);
+  border-image: linear-gradient(to bottom, $purple-60, $purple-50) 1;
+  color: $text-on-color;
+
+  &:hover {
+    background: linear-gradient($purple-70-hover, $purple-70-hover);
+  }
+
+  &:focus {
+    border: 2px solid $focus;
+    outline: 1px solid $focus-inset;
+    outline-offset: -3px;
+  }
+
+  .#{$block-class}__sequence {
+    @include type-style('heading-05');
+
+    padding-top: $spacing-05;
+    padding-left: $spacing-05;
+  }
+
+  .#{$block-class}__status {
+    position: absolute;
+    z-index: 2;
+    top: $spacing-05;
+    right: $spacing-05;
+  }
+
+  .#{$block-class}__header-body-container {
+    display: flex;
+  }
+
+  .#{$block-class}__header {
+    padding-right: $spacing-09;
+
+    @include breakpoint-down(lg) {
+      padding-bottom: 0;
+    }
+  }
+
+  .#{$block-class}__body {
+    @include breakpoint-down(lg) {
+      padding: 0;
+    }
+  }
+  .#{$block-class}__media {
+    align-content: center;
+
+    @include breakpoint-down(lg) {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-top: to-rem(-50px);
+      margin-bottom: -$spacing-09;
+    }
+  }
+
+  .#{$block-class}__sequence ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-top: to-rem(-56px);
+      margin-bottom: -$spacing-09;
+    }
+  }
+
+  //meta-data
+  .#{$block-class}__actions {
+    padding: $spacing-05;
+    gap: $spacing-04;
+    @include type-style('label-01');
+
+    .#{$block-class}__icon {
+      display: flex;
+      padding: 0;
+      margin-right: 0;
+    }
+
+    .#{$block-class}__icon svg {
+      margin-right: $spacing-02;
+    }
+
+    .#{$block-class}__icon:hover {
+      background: none;
+    }
+  }
+
+  .#{$block-class}__footer {
+    position: relative;
+    z-index: 1;
+    justify-content: space-between;
+    border: none;
+
+    .#{$block-class}__action-icon {
+      display: flex;
+      align-self: center;
+      padding-right: $spacing-05;
+    }
+  }
+}
+.#{$block-class}__disabled:focus,
+.#{$block-class}__disabled:hover,
+.#{$block-class}__disabled {
+  border: 1px solid $border-disabled;
+  background: $layer-02;
+  color: $text-disabled;
+  cursor: default;
+}

packages/ibm-products-styles/src/components/GetStartedCard/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carbon-imports';
+@use './get-started-card';

packages/ibm-products-styles/src/components/GetStartedCard/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './get-started-card';

packages/ibm-products-styles/src/components/_index-with-carbon.scss

@@ -76,3 +76,4 @@
 @use './TagOverflow/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;
 @use './ConditionBuilder/index-with-carbon' as *;
+@use './GetStartedCard/index-with-carbon' as *;

packages/ibm-products-styles/src/components/_index.scss

@@ -83,3 +83,4 @@
 @use './TagOverflow';
 @use './FilterPanel';
 @use './ConditionBuilder';
+@use './GetStartedCard';