diff --git a/apps/website/next.config.js b/apps/website/next.config.js index 047c88588..f475ff353 100644 --- a/apps/website/next.config.js +++ b/apps/website/next.config.js @@ -13,10 +13,17 @@ module.exports = { return config; }, reactStrictMode: true, - assetPrefix: process.env.NODE_ENV === "production" ? `/halstack/${process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0]}` : undefined, - basePath: process.env.NODE_ENV === "production" ? `/halstack/${process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0]}` : undefined, + assetPrefix: + process.env.NODE_ENV === "production" + ? `/halstack/${process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0]}` + : undefined, + basePath: + process.env.NODE_ENV === "production" + ? `/halstack/${process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0]}` + : undefined, transpilePackages: [ "@cloudscape-design/components", "@cloudscape-design/component-toolkit", + "@cloudscape-design/theming-runtime", ], }; diff --git a/apps/website/package.json b/apps/website/package.json index e58ef7829..125d8ff45 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -8,6 +8,7 @@ "lint": "next lint" }, "dependencies": { + "@cloudscape-design/components": "^3.0.706", "@dxc-technology/halstack-react": "*", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "5.1.29", diff --git a/apps/website/pages/components/bar-chart/index.tsx b/apps/website/pages/components/bar-chart/index.tsx deleted file mode 100644 index 115dcea52..000000000 --- a/apps/website/pages/components/bar-chart/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BarChartPageLayout from "../../../screens/components/bar-chart/BarChartPageLayout"; -import BarChartCodePage from "../../../screens/components/bar-chart/code/BarChartCodePage"; - -const Index = () => { - return ( - <> - - Bar Chart — Halstack Design System - - - - ); -}; - -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Index; diff --git a/apps/website/pages/components/bar-chart/specifications.tsx b/apps/website/pages/components/bar-chart/specifications.tsx deleted file mode 100644 index d6a7935f9..000000000 --- a/apps/website/pages/components/bar-chart/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BarChartPageLayout from "../../../screens/components/bar-chart/BarChartPageLayout"; -import BarChartSpecsPage from "../../../screens/components/bar-chart/specs/BarChartSpecsPage"; - -const Specifications = () => { - return ( - <> - - Bar Chart Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/bar-chart/usage.tsx b/apps/website/pages/components/bar-chart/usage.tsx deleted file mode 100644 index 2603a94a5..000000000 --- a/apps/website/pages/components/bar-chart/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import BarChartPageLayout from "../../../screens/components/bar-chart/BarChartPageLayout"; -import BarChartUsagePage from "../../../screens/components/bar-chart/usage/BarChartUsagePage"; - -const Usage = () => { - return ( - <> - - Bar Chart Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/pages/principles/data-visualization.tsx b/apps/website/pages/principles/data-visualization.tsx new file mode 100644 index 000000000..367225b6b --- /dev/null +++ b/apps/website/pages/principles/data-visualization.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import DataVisualizationPage from "../../screens/principles/data-visualization/DataVisualizationPage"; + +const DataVisualization = () => { + return ( + <> + + Data visualization — Halstack Design System + + + + ); +}; + +export default DataVisualization; diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 805db0d15..634ac1fd0 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -11,11 +11,6 @@ "path": "/components/badge", "status": "new" }, - { - "label": "Bar Chart", - "path": "/components/bar-chart", - "status": "new" - }, { "label": "Bleed", "path": "/components/bleed", "status": "stable" }, { "label": "Box", "path": "/components/box", "status": "deprecated" }, { diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts index 5981c0ac3..e8f4cdd04 100644 --- a/apps/website/screens/common/pagesList.ts +++ b/apps/website/screens/common/pagesList.ts @@ -34,6 +34,7 @@ const utilitiesLinks: LinkDetails[] = [ const principlesLinks: LinkDetails[] = [ { label: "Color", path: "/principles/color" }, + { label: "Data visualization", path: "/principles/data-visualization" }, { label: "Iconography", path: "/principles/iconography" }, { label: "Layout", path: "/principles/layout" }, { label: "Localization", path: "/principles/localization" }, diff --git a/apps/website/screens/components/bar-chart/BarChartPageLayout.tsx b/apps/website/screens/components/bar-chart/BarChartPageLayout.tsx deleted file mode 100644 index 3f3c3470e..000000000 --- a/apps/website/screens/components/bar-chart/BarChartPageLayout.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import PageHeading from "@/common/PageHeading"; -import TabsPageHeading from "@/common/TabsPageLayout"; -import ComponentHeading from "@/common/ComponentHeading"; - -const BarChartPageHeading = ({ children }: { children: React.ReactNode }) => { - const tabs = [ - { label: "Code", path: "/components/bar-chart" }, - { label: "Usage", path: "/components/bar-chart/usage" }, - { label: "Specifications", path: "/components/bar-chart/specifications" }, - ]; - - return ( - - - - - - A bar chart is a graphical representation that displays and compares discrete data categories using - rectangular bars. Each bar's length or height is proportional to the frequency or value of its corresponding - category, allowing users to identify which groups are the highest or most common and compare them with - others. - - - - - {children} - - ); -}; - -export default BarChartPageHeading; diff --git a/apps/website/screens/components/bar-chart/code/BarChartCodePage.tsx b/apps/website/screens/components/bar-chart/code/BarChartCodePage.tsx deleted file mode 100644 index 704dd94e0..000000000 --- a/apps/website/screens/components/bar-chart/code/BarChartCodePage.tsx +++ /dev/null @@ -1,228 +0,0 @@ -import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import TableCode, { ExtendedTableCode } from "@/common/TableCode"; -import DocFooter from "@/common/DocFooter"; -import Code from "@/common/Code"; - -const thresholdSeriesTypeString = `{ - title: string; - type: "threshold"; - y?: number; - x?: number | string; -}`; - -const barDataSeriesTypeString = `{ - title: string; - type: "bar"; - data: ({ - x: number | string; - y: number - })[]; -}`; - -const sections = [ - { - title: "Props", - content: ( - - - Name - Type - Description - Default - - - chartTitle - - string - - Title of the chart. - - - - - error - - string - - Error state of the chart. If set, the component will display an error message with a retry action. - - - - - horizontalBars - - boolean - - - When set to true, the x and y axes are swapped, resulting in bars being displayed horizontally rather than - vertically. This feature is applicable only when the chart contains exclusively bar series. - - - false - - - - legendTitle - - string - - Title of the chart legend. - - - - - loading - - boolean - - If true, activates the loading state of the component. - - false - - - - onFilterChange - - {"(visibleSeries: string[]) => void"} - - - This function will be called when the user changes the displayed data series with the default filter. This - event is only triggered when showFilter is set to true. - - - - - - onHighlightChange - - {"(highlightedSeries?: string) => void"} - - - This function will be called when the user hovers over a data series through the chart legend. This event is - only triggered when showLegend is set to true. - - - - - - onRetry - - {"() => void"} - - - This function will be called when the user clicks the retry action in the error state. A{" "} - DxcButton component will be displayed if this prop is defined to perform the action. - - - - - - series - - {`(${thresholdSeriesTypeString} | ${barDataSeriesTypeString})[]`} - - An array of objects representing the data series to be displayed in the chart. - - - - - showFilter - - boolean - - If true, the chart will display a filter to allow the user to change the displayed data series. - - false - - - - showLegend - - boolean - - If true, the chart will display a legend with the data series information. - - false - - - - stackedBars - - boolean - - If true, bars in the same data point are stacked instead of being grouped next to each other. - - false - - - - xDomain - - (number | string)[] - - - Specifies the x-axis domain, defining the visible range. For numerical data, use a tuple: [minValue, - maxValue]. For categorical data, use an array of category strings. Explicitly setting this is recommended. - If not set, the component will auto-fit all data points. - - - - - - xFormatter - - {"(value: number | string) => string"} - - Function to format the displayed label of an x-axis mark. - - - - - xTitle - - string - - Title of the x axis. - - - - - yDomain - - [number, number] - - - Specifies the y-axis domain, defining the visible range. The domain is defined by a tuple: [minValue, - maxValue]. Explicitly setting this is recommended. If not set, the component will auto-fit all data points. - - - - - - yFormatter - - {"(value: number | string) => string"} - - Function to format the displayed label of an y-axis mark. - - - - - yTitle - - string - - Title of the y axis. - - - - - ), - }, - { - title: "Examples", - content: "Right now there are no examples for this component.", - }, -]; - -const BarChartTableCodePage = () => { - return ( - - - - - - - ); -}; - -export default BarChartTableCodePage; diff --git a/apps/website/screens/components/bar-chart/specs/BarChartSpecsPage.tsx b/apps/website/screens/components/bar-chart/specs/BarChartSpecsPage.tsx deleted file mode 100644 index 92668b047..000000000 --- a/apps/website/screens/components/bar-chart/specs/BarChartSpecsPage.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import Figure from "@/common/Figure"; -import specs from "./images/bar_chart_specs.png"; -import anatomy from "./images/bar_chart_anatomy.png"; -import colorPalette from "./images/bar_chart_color_palette.png"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Bar chart design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Bar chart anatomy - - - Title - This is a DxcHeading level={2} component - - - Filter - This is a DxcSelect component - - Graph - Legend - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - <> - - We have carefully selected various shades from our color palette to be used in data visualization. - Accessibility has been a key consideration in this selection, ensuring that these colors are - distinguishable for all users. - - Bar chart color palette - - - - Categorical color - Core token - Value - - - - - color-categorical-01 - - color-purple-500 - - #A46EDE - - - color-categorical-02 - - color-blue-600 - - #0095FF - - - color-categorical-03 - - color-green-700 - - #24A148 - - - color-categorical-04 - - color-red-500 - - #FE344F - - - color-categorical-05 - - color-yellow-800 - - #947705 - - - color-categorical-06 - - color-orange-700 - - #C26C0A - - - color-categorical-07 - - color-purple-600 - - #7D2FD0 - - - color-categorical-08 - - color-blue-800 - - #0067B3 - - - color-categorical-09 - - color-green-900 - - #135325 - - - color-categorical-10 - - color-red-700 - - #D0011B - - - color-categorical-11 - - color-yellow-900 - - #624F04 - - - color-categorical-12 - - color-orange-800 - - #915108 - - - - - ), - }, - ], - }, -]; - -const BarChartSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default BarChartSpecsPage; diff --git a/apps/website/screens/components/bar-chart/specs/images/bar_chart_anatomy.png b/apps/website/screens/components/bar-chart/specs/images/bar_chart_anatomy.png deleted file mode 100644 index 18aa63512..000000000 Binary files a/apps/website/screens/components/bar-chart/specs/images/bar_chart_anatomy.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/specs/images/bar_chart_specs.png b/apps/website/screens/components/bar-chart/specs/images/bar_chart_specs.png deleted file mode 100644 index 16c7c91e8..000000000 Binary files a/apps/website/screens/components/bar-chart/specs/images/bar_chart_specs.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/BarChartUsagePage.tsx b/apps/website/screens/components/bar-chart/usage/BarChartUsagePage.tsx deleted file mode 100644 index c9b359f29..000000000 --- a/apps/website/screens/components/bar-chart/usage/BarChartUsagePage.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Figure from "@/common/Figure"; -import Image from "@/common/Image"; -import barChartVariants from "./images/bar_chart_variants.png"; -import barChartElements from "./images/bar_chart_elements.png"; -import vertical from "./images/bar_chart_vertical.png"; -import grouped from "./images/bar_chart_grouped.png"; -import horizontal from "./images/bar_chart_horizontal.png"; -import stacked from "./images/bar_chart_stacked.png"; - -const sections = [ - { - title: "Usage", - content: ( - - We use the{" "} - - Cloudscape - {" "} - library for data visualization in our design system. Cloudscape offers high-quality, adaptable, and - user-friendly tools for creating clear and comprehensive data visualizations. This helps our users understand - and analyze data effectively, facilitating informed decision-making. - - ), - subSections: [ - { - title: "Do's", - content: ( - - - Ensure both the X and Y axes are labeled with appropriate units and descriptions. - - - Always plot bars against a zero-value baseline. It simplifies bar length comparison and ensures accurate - data visualization. A non-zero baseline can distort the comparison as it disrupts the ratio between bar - lengths and actual values. - - - When constructing a bar chart, consider the order in which you will plot the bars. A common convention is - to sort the bars from longest to shortest. While comparisons can be made regardless of order, this - approach can ease the reader's task. However, if the category labels have an inherent order, this should - typically take precedence. - - - ), - }, - { - title: "Don'ts", - content: ( - - - Avoid adding too many categories or bars in a single chart, which can make it cluttered and hard to read. - - Consider breaking up data into multiple charts if necessary. - - Avoid using abbreviations or jargon in labels that might not be understood by all viewers. - - - ), - }, - ], - }, - { - title: "Variants", - content: ( -
- Bar chart variants -
- ), - subSections: [ - { - title: "Vertical Bar Chart", - content: ( - <> - Vertical variant - - Bars are oriented vertically with the X-axis representing categories and the Y-axis representing values. - - - - Use Case: Comparing quantities across different categories. - - - - ), - }, - { - title: "Stacked Bar Chart", - content: ( - <> - Stacked variant - - Bars are stacked on top of each other. Each stack segment represents a different sub-category. - - - - Use Case: Showing the composition of each category, as well as comparing total values - across categories. - - - - ), - }, - { - title: "Grouped Bar Chart", - content: ( - <> - Grouped variant - - In a grouped bar chart, bars representing different sub-categories are placed next to each other, rather - than stacked, for each main category. - - - - Use Case: More direct comparison of sub-category values across different main - categories. - - - - ), - }, - { - title: "Horizontal Bar Chart", - content: ( - <> - Horizontal variant - - Bars are oriented horizontally with the Y-axis representing categories and the X-axis representing values. - - - - Use Case: Comparing quantities across different categories, especially when category - names are long. - - - - For more details on how to use this component, please refer to its original source,{" "} - - Cloudscape - - . - - - ), - }, - ], - }, - { - title: "Elements of the Bar Chart", - content: ( - <> - - The Bar Chart is composed of several key elements that contribute to its effectiveness in visualizing data. - They work together to provide a clear, accurate, and visually appealing representation of data, making it - easier for viewers to understand and interpret the information being presented. - - Bar chart elements - - - Title: A descriptive heading that explains what the bar chart is about. - - - Filter: Enable data filtering. - - - Category axis (x-axis): The horizontal axis in a vertical bar chart or the vertical axis in - a horizontal bar chart. Typically represents categories or discrete data points. - - - Value axis (y-axis): The vertical axis in a vertical bar chart or the horizontal axis in a - horizontal bar chart. Typically represents the scale of values or measurements. - - - Axis labels: Text labels that describe the data represented by each axis. Placed along the - axes to identify categories (X-Axis) and units or magnitude (Y-Axis). - - - Axis titles: Descriptive titles for the X and Y axes that provide additional context about - the data. - - - Tick marks: Small marks along the axes that indicate the scale or categories. Aid in - aligning the bars with the corresponding values or categories. - - - Grid lines: Horizontal and/or vertical lines that help in reading the values of the bars - against the axes. Their purpose is o enhance readability and precision in interpreting data values. - - - Average line (threshold): An average line in a bar chart is a horizontal (or vertical, - depending on the chart orientation) line that represents the average value of the data points being - displayed. It helps provide a quick visual reference for comparing individual bar values to the overall - average of the dataset. - - - Bars: Rectangular blocks that represent data values. Can be vertical (column chart) or - horizontal (bar chart). - - - Legend: A key that explains what different colors, patterns, or bar segments represent. - - - Details popover: Information box that appear when a user hovers over a bar. Displays - detailed information about the data point. - - - - ), - }, - { - title: "Interactions", - content: ( - - - Hover interaction: Display popover when a user hovers over a bar. - - - Click interaction: Optional click events on bars to trigger additional actions (e.g., - filtering data displayed in a table). - - - ), - }, -]; - -const BarChartUsagePage = () => { - return ( - - - - - - - ); -}; - -export default BarChartUsagePage; diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_elements.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_elements.png deleted file mode 100644 index fd8294814..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_elements.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_grouped.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_grouped.png deleted file mode 100644 index d7820384a..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_grouped.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_horizontal.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_horizontal.png deleted file mode 100644 index 7d794c7a5..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_horizontal.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_stacked.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_stacked.png deleted file mode 100644 index 9f6e107f2..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_stacked.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_variants.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_variants.png deleted file mode 100644 index 21b688d32..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_variants.png and /dev/null differ diff --git a/apps/website/screens/components/bar-chart/usage/images/bar_chart_vertical.png b/apps/website/screens/components/bar-chart/usage/images/bar_chart_vertical.png deleted file mode 100644 index 031c578cd..000000000 Binary files a/apps/website/screens/components/bar-chart/usage/images/bar_chart_vertical.png and /dev/null differ diff --git a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx index a0716fdc0..dc640b6b3 100644 --- a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx +++ b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx @@ -42,9 +42,6 @@ const sections = [ We can identify three different variants that imply some visual changes according to color and border attributes. - - Variants: primary, secondary and tertiary. - @@ -55,21 +52,27 @@ const sections = [ - Primary + + Primary + For the principal call to action on the page; primary buttons should only appear once per screen (not including the application header or in a modal dialog). - Secondary + + Secondary + For less prominent actions; secondary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. - Text + + Text + For the least pronounced actions; often used in conjunction with a primary button (e.g. cancel in a modal dialog). @@ -290,7 +293,7 @@ const sections = [ ], }, { - title: "Best practices for button labels:", + title: "Best practices for button labels", subSections: [ { title: "Be clear and concise", diff --git a/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx b/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx index 45e541d88..de4a37c0e 100644 --- a/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx +++ b/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx @@ -39,14 +39,18 @@ const sections = [ - Vertical + + Vertical + Short lists of radio buttons should be stacked vertically below a descriptive label to better associate the group. Options that are listed vertically are easier to read. - Horizontal + + Horizontal + Multiple radio buttons may be displayed horizontally across the page while keeping them aligned within their respective columns. Here, it is needed to have in consideration that the linear radio buttons diff --git a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx b/apps/website/screens/components/slider/usage/SliderUsagePage.tsx index 407c6495c..9a89c23e5 100644 --- a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx +++ b/apps/website/screens/components/slider/usage/SliderUsagePage.tsx @@ -29,7 +29,10 @@ const sections = [ title: "Variants", content: ( <> - The slider has two variants: + + The slider component has two variants that can be used depending on the requirements of the application. + + @@ -42,17 +45,16 @@ const sections = [ Discrete - Slider can only get the value marked alongside the total line + Slider can only get the value marked alongside the total line. - Continous + Continuos - Slider can take every value mapped + Slider can take every value mapped. - ), }, diff --git a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx index 4557e443c..dba19b81c 100644 --- a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx +++ b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx @@ -16,7 +16,7 @@ const StatusLightPageHeading = ({ children }: { children: React.ReactNode }) => - Status Lights, as semantic elements, allow the user to display the completion status of tasks, processes and + Status lights, as semantic elements, allow the user to display the completion status of tasks, processes and more. diff --git a/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx b/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx index b08292a93..d34c63267 100644 --- a/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx +++ b/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx @@ -64,10 +64,6 @@ const sections = [ The Status light component has five different modes, each one corresponding to its semantic meaning. - - Variants: default, info, success, warning{" "} - and error. - @@ -78,49 +74,37 @@ const sections = [ - Default + + Default + For neutral statuses, like archived, draft, paused... - Info + + Info + For live statuses, like active, in use, uploaded... - Success + + Success + For positive statuses, like finished, approved, completed... - Warning + + Warning + For pending or critical statuses, like scheduled, in progress, processing... - Error + + Error + For negative statuses, like incomplete, rejected, failed... - {/* - - Default: for neutral statuses, like archived, draft, paused... - - - Info: for live statuses, like active, in use, uploaded... - - - Success: for positive statuses, like finished, approved, - completed... - - - Warning: for pending or critical statuses, like scheduled, in - progress, processing... - - - Error: for negative statuses, like incomplete, rejected, failed... - - -
- Status light variants -
*/} ), }, diff --git a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx new file mode 100644 index 000000000..d9619ab0f --- /dev/null +++ b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx @@ -0,0 +1,345 @@ +import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import PageHeading from "@/common/PageHeading"; +import Code from "@/common/Code"; +import Figure from "@/common/Figure"; +import Image from "@/common/Image"; +import Link from "next/link"; +import colorPalette from "./images/bar_chart_color_palette.png"; +import barChartVariants from "./images/bar_chart_variants.png"; +import Example from "@/common/example/Example"; +import themeBarChart from "./examples/barChart"; +import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; + +const sections = [ + { + title: "Introduction", + content: ( + <> + + At Halstack, we believe that effective data visualization is crucial for transforming complex data into clear, + actionable insights. Our principles focus on clarity, accuracy, accessibility, and interactivity. By adhering + to these guidelines, you can create visual representations that are not only aesthetically pleasing, but also + highly functional, ensuring that users can easily understand and interact with the data presented. + + + As we consider data visualization a tremendously dense and complex design pattern, we have decided to rely on + another design system for this task. Our choice is{" "} + + Cloudscape + + . + + + Cloudscape offers high-quality, adaptable, and user-friendly tools for creating clear and comprehensive data + visualizations. This helps our users understand and analyze data effectively, facilitating informed + decision-making. + + + ), + }, + { + title: "Chart types", + content: ( + <> + The Cloudscape design system provides a wide range of chart types, including: + + + + Bar chart + + + + + Line chart + + + + + Mixed line and bar chart + + + + + Area chart + + + + + Pie and donut chart + + + + + All the information presented below complements the{" "} + + Cloudscape data visualization pattern + + . We strongly recommend reading it in parallel. + + + ), + }, + { + title: "Bar chart", + content: ( + + A bar chart is a graphical representation that displays and compares discrete data categories using rectangular + bars. Each bar's length or height is proportional to the frequency or value of its corresponding category, + allowing users to identify which groups are the highest or most common and compare them with others. + + ), + subSections: [ + { + title: "Do's", + content: ( + + + Ensure both the X and Y axes are labeled with appropriate units and descriptions. + + + Always plot bars against a zero-value baseline. It simplifies bar length comparison and ensures accurate + data visualization. A non-zero baseline can distort the comparison as it disrupts the ratio between bar + lengths and actual values. + + + When constructing a bar chart, consider the order in which you will plot the bars. A common convention is + to sort the bars from longest to shortest. While comparisons can be made regardless of the order, this + approach can ease the reader's task. However, if the category labels have an inherent order, this should + typically take precedence. + + + ), + }, + { + title: "Don'ts", + content: ( + + + Avoid adding too many categories or bars in a single chart, which can make it cluttered and hard to read. + + Consider breaking up data into multiple charts if necessary. + + Avoid using abbreviations or jargon in labels that might not be understood by all viewers. + + + ), + }, + { + title: "Variants", + content: ( + <> + Bar chart variants + + + + Variant + Description + Use case + + + + + + Vertical + + + Bars are oriented vertically with the X-axis representing categories and the Y-axis representing + values. + + Comparing quantities across different categories. + + + + Stacked + + + Bars are stacked on top of each other. Each stack segment represents a different sub-category. + + + Showing the composition of each category, as well as comparing total values across categories. + + + + + Grouped + + + In a grouped bar chart, bars representing different sub-categories are placed next to each other, + rather than stacked, for each main category. + + More direct comparison of sub-category values across different main categories. + + + + Horizontal + + + Bars are oriented horizontally with the Y-axis representing categories and the X-axis representing + values. + + Comparing quantities across different categories, especially when category names are long. + + + + + ), + }, + ], + }, + { + title: "Design tokens", + subSections: [ + { + title: "Color", + content: ( + <> + + We have carefully selected various shades from our color palette to be used in data visualization. + Accessibility has been a key consideration in this selection, ensuring that these colors are + distinguishable for all users. + + Bar chart color palette + + + + Categorical color + Core token + Value + + + + + color-categorical-01 + + color-purple-500 + + #A46EDE + + + color-categorical-02 + + color-blue-600 + + #0095FF + + + color-categorical-03 + + color-green-700 + + #24A148 + + + color-categorical-04 + + color-red-500 + + #FE344F + + + color-categorical-05 + + color-yellow-800 + + #947705 + + + color-categorical-06 + + color-orange-700 + + #C26C0A + + + color-categorical-07 + + color-purple-600 + + #7D2FD0 + + + color-categorical-08 + + color-blue-800 + + #0067B3 + + + color-categorical-09 + + color-green-900 + + #135325 + + + color-categorical-10 + + color-red-700 + + #D0011B + + + color-categorical-11 + + color-yellow-900 + + #624F04 + + + color-categorical-12 + + color-orange-800 + + #915108 + + + + + ), + }, + ], + }, + { + title: "How to apply our design tokens", + content: ( + <> + + Here is an example of how to apply our design tokens to a bar chart using the Cloudscape theming strategy. + + + For a more detailed explanation of how Cloudscape components are styled, please refer to their{" "} + + theming documentation + + . The complete list of data visualization color design tokens can be found{" "} + + here + + . + + + + ), + }, +]; + +const DataVisualizationPage = () => { + return ( + + + + + + + + + + + + ); +}; + +export default DataVisualizationPage; diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.ts b/apps/website/screens/principles/data-visualization/examples/barChart.ts new file mode 100644 index 000000000..70cc217f9 --- /dev/null +++ b/apps/website/screens/principles/data-visualization/examples/barChart.ts @@ -0,0 +1,96 @@ +import { applyTheme } from "@cloudscape-design/components/theming"; +import { BarChart } from "@cloudscape-design/components"; +import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react"; + +const CoreColorTokens = { + color_grey_700: "#666666", + color_grey_900: "#333333", + color_grey_50_a: "#00000005", + color_grey_100_a: "#0000000d", + color_grey_200_a: "#0000001a", + color_grey_300_a: "#00000033", + color_grey_400_a: "#0000004d", + color_grey_500_a: "#00000066", + color_grey_600_a: "#00000080", + color_grey_700_a: "#00000099", + color_grey_800_a: "#000000b3", + color_grey_900_a: "#000000cc", + color_purple_500: "#a46ede", + color_purple_600: "#7d2fd0", + color_blue_600: "#0095ff", + color_blue_800: "#0067b3", + color_red_500: "#fe344f", + color_red_700: "#d0011b", + color_green_700: "#24a148", + color_green_900: "#135325", + color_yellow_800: "#947705", + color_yellow_900: "#624f04", + color_orange_700: "#c26c0a", + color_orange_800: "#915108", +}; + +const code = `() => { + const theme = { + tokens: { + colorChartsPaletteCategorical1: CoreColorTokens.color_purple_500, + colorChartsPaletteCategorical2: CoreColorTokens.color_blue_600, + colorChartsPaletteCategorical3: CoreColorTokens.color_green_700, + colorChartsPaletteCategorical4: CoreColorTokens.color_red_500, + colorChartsPaletteCategorical5: CoreColorTokens.color_orange_700, + colorChartsPaletteCategorical6: CoreColorTokens.color_yellow_800, + colorChartsPaletteCategorical7: CoreColorTokens.color_purple_600, + colorChartsPaletteCategorical8: CoreColorTokens.color_blue_800, + colorChartsPaletteCategorical9: CoreColorTokens.color_green_900, + colorChartsPaletteCategorical10: CoreColorTokens.color_red_700, + colorChartsPaletteCategorical11: CoreColorTokens.color_orange_800, + colorChartsPaletteCategorical12: CoreColorTokens.color_yellow_900, + colorChartsThresholdNeutral: CoreColorTokens.color_grey_700, + colorTextBodySecondary: CoreColorTokens.color_grey_700, + colorTextBodyDefault: CoreColorTokens.color_grey_900, + }, + }; + + applyTheme({ theme }); + + return ( + + + + + ); +}`; + +const scope = { + applyTheme, + BarChart, + CoreColorTokens, + DxcHeading, + DxcInset, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/bar-chart/specs/images/bar_chart_color_palette.png b/apps/website/screens/principles/data-visualization/images/bar_chart_color_palette.png similarity index 100% rename from apps/website/screens/components/bar-chart/specs/images/bar_chart_color_palette.png rename to apps/website/screens/principles/data-visualization/images/bar_chart_color_palette.png diff --git a/apps/website/screens/principles/data-visualization/images/bar_chart_variants.png b/apps/website/screens/principles/data-visualization/images/bar_chart_variants.png new file mode 100644 index 000000000..8fbd48bec Binary files /dev/null and b/apps/website/screens/principles/data-visualization/images/bar_chart_variants.png differ diff --git a/package-lock.json b/package-lock.json index 4a864f891..a88dc4ac0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ }, "apps/website": { "dependencies": { + "@cloudscape-design/components": "^3.0.706", "@dxc-technology/halstack-react": "*", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "5.1.29", @@ -2186,7 +2187,6 @@ "version": "1.0.49", "resolved": "https://registry.npmjs.org/@cloudscape-design/collection-hooks/-/collection-hooks-1.0.49.tgz", "integrity": "sha512-zWvFGIJLBqmKM01xbogMSocpDI/DOLw8bpeH0+1mB7nP/M5OnkcoPtFtEvu2CZdEFUUYtKml0N+W7GI/NtIcwg==", - "peer": true, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } @@ -2195,17 +2195,15 @@ "version": "1.0.0-beta.63", "resolved": "https://registry.npmjs.org/@cloudscape-design/component-toolkit/-/component-toolkit-1.0.0-beta.63.tgz", "integrity": "sha512-CfV/HCg0IAyf3uDgx0ccnDeEREWpTJbHAMkpTvWfGt99hZpq/RQvObkmxlCR5d4im0W4ezdUQODrfO7YfbajtQ==", - "peer": true, "dependencies": { "@juggle/resize-observer": "^3.3.1", "tslib": "^2.3.1" } }, "node_modules/@cloudscape-design/components": { - "version": "3.0.677", - "resolved": "https://registry.npmjs.org/@cloudscape-design/components/-/components-3.0.677.tgz", - "integrity": "sha512-kZCEdT2UhQODz1nGyxaP6+rVEwi9V1U2Tb5GYXQTT++S45UBWH/hnxCEvlHDASgZz1o1aNOaCmAAw4sbFp2tQA==", - "peer": true, + "version": "3.0.706", + "resolved": "https://registry.npmjs.org/@cloudscape-design/components/-/components-3.0.706.tgz", + "integrity": "sha512-Xgs8ZEEFhVoshTtfZTbOn9MqOhC0+thp4hHyXshtVDbKPcwSE7qxl4xLTGm+eCUeA+ektNhusqLknCqJuxEguA==", "dependencies": { "@cloudscape-design/collection-hooks": "^1.0.0", "@cloudscape-design/component-toolkit": "^1.0.0-beta", @@ -2236,7 +2234,6 @@ "version": "1.0.39", "resolved": "https://registry.npmjs.org/@cloudscape-design/test-utils-core/-/test-utils-core-1.0.39.tgz", "integrity": "sha512-vCqu7wOQFsjQ62Ek01ST6NQU0hcr+TBGqavk7R+Qs46x8V/Yk3pCWEjByxYfwZlqdxVd9YzoiHeAdAbKgqzHOA==", - "peer": true, "dependencies": { "css-selector-tokenizer": "^0.8.0", "css.escape": "^1.5.1" @@ -2246,7 +2243,6 @@ "version": "1.0.54", "resolved": "https://registry.npmjs.org/@cloudscape-design/theming-runtime/-/theming-runtime-1.0.54.tgz", "integrity": "sha512-MRbrdDhdkqInzwrWBr8eMgikW7eHiDWpgw+j2YOp+rojyA91P/yn7URXkbgcCIbfpGNsJ/XFE6ftgxJ4VyvXLQ==", - "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -2277,7 +2273,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz", "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==", - "peer": true, "dependencies": { "tslib": "^2.0.0" }, @@ -2289,7 +2284,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz", "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==", - "peer": true, "dependencies": { "@dnd-kit/accessibility": "^3.1.0", "@dnd-kit/utilities": "^3.2.2", @@ -2304,7 +2298,6 @@ "version": "7.0.2", "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz", "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==", - "peer": true, "dependencies": { "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" @@ -2318,7 +2311,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==", - "peer": true, "dependencies": { "tslib": "^2.0.0" }, @@ -2897,7 +2889,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz", "integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==", - "peer": true, "dependencies": { "@formatjs/intl-localematcher": "0.5.4", "tslib": "^2.4.0" @@ -2907,7 +2898,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz", "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==", - "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -2916,7 +2906,6 @@ "version": "2.7.8", "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz", "integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==", - "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.0.0", "@formatjs/icu-skeleton-parser": "1.8.2", @@ -2927,7 +2916,6 @@ "version": "1.8.2", "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz", "integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==", - "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.0.0", "tslib": "^2.4.0" @@ -2937,7 +2925,6 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz", "integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==", - "peer": true, "dependencies": { "tslib": "^2.4.0" } @@ -4364,8 +4351,7 @@ "node_modules/@juggle/resize-observer": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", - "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==", - "peer": true + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" }, "node_modules/@mdx-js/react": { "version": "3.0.1", @@ -8262,8 +8248,7 @@ "node_modules/ace-builds": { "version": "1.35.4", "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.35.4.tgz", - "integrity": "sha512-r0KQclhZ/uk5a4zOqRYQkJuQuu4vFMiA6VTj54Tk4nI1TUR3iEMMppZkWbNoWEgWwv4ciDloObb9Rf4V55Qgjw==", - "peer": true + "integrity": "sha512-r0KQclhZ/uk5a4zOqRYQkJuQuu4vFMiA6VTj54Tk4nI1TUR3iEMMppZkWbNoWEgWwv4ciDloObb9Rf4V55Qgjw==" }, "node_modules/acorn": { "version": "7.4.1", @@ -9806,7 +9791,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "peer": true, "engines": { "node": ">=6" } @@ -10164,7 +10148,6 @@ "version": "0.8.0", "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", - "peer": true, "dependencies": { "cssesc": "^3.0.0", "fastparse": "^1.1.2" @@ -10189,7 +10172,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "peer": true, "bin": { "cssesc": "bin/cssesc" }, @@ -10242,14 +10224,12 @@ "node_modules/d3-path": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", - "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==", - "peer": true + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" }, "node_modules/d3-shape": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", - "peer": true, "dependencies": { "d3-path": "1" } @@ -10338,7 +10318,6 @@ "version": "2.30.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "peer": true, "dependencies": { "@babel/runtime": "^7.21.0" }, @@ -10745,7 +10724,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" @@ -12805,8 +12783,7 @@ "node_modules/fastparse": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", - "peer": true + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==" }, "node_modules/fastq": { "version": "1.17.1", @@ -14352,7 +14329,6 @@ "version": "10.5.14", "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz", "integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==", - "peer": true, "dependencies": { "@formatjs/ecma402-abstract": "2.0.0", "@formatjs/fast-memoize": "2.2.0", @@ -18451,7 +18427,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/mnth/-/mnth-2.0.0.tgz", "integrity": "sha512-3ZH4UWBGpAwCKdfjynLQpUDVZWMe6vRHwarIpMdGLUp89CVR9hjzgyWERtMyqx+fPEqQ/PsAxFwvwPxLFxW40A==", - "peer": true, "dependencies": { "@babel/runtime": "^7.8.0" }, @@ -20632,7 +20607,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/react-keyed-flatten-children/-/react-keyed-flatten-children-1.3.0.tgz", "integrity": "sha512-qB7A6n+NHU0x88qTZGAJw6dsqwI941jcRPBB640c/CyWqjPQQ+YUmXOuzPziuHb7iqplM3xksWAbGYwkQT0tXA==", - "peer": true, "dependencies": { "react-is": "^16.8.6" }, @@ -20643,8 +20617,7 @@ "node_modules/react-keyed-flatten-children/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-live": { "version": "2.4.1", @@ -20775,7 +20748,6 @@ "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "peer": true, "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -25093,8 +25065,7 @@ "node_modules/weekstart": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/weekstart/-/weekstart-1.1.0.tgz", - "integrity": "sha512-ZO3I7c7J9nwGN1PZKZeBYAsuwWEsCOZi5T68cQoVNYrzrpp5Br0Bgi0OF4l8kH/Ez7nKfxa5mSsXjsgris3+qg==", - "peer": true + "integrity": "sha512-ZO3I7c7J9nwGN1PZKZeBYAsuwWEsCOZi5T68cQoVNYrzrpp5Br0Bgi0OF4l8kH/Ez7nKfxa5mSsXjsgris3+qg==" }, "node_modules/whatwg-encoding": { "version": "2.0.0", @@ -25543,7 +25514,6 @@ "typescript": "^5.3.3" }, "peerDependencies": { - "@cloudscape-design/components": "3.0.677", "react": "^18.x", "react-dom": "^18.x", "styled-components": "^5.0.1" diff --git a/packages/lib/jest.config.js b/packages/lib/jest.config.js index 60e5c13a4..6e161db97 100644 --- a/packages/lib/jest.config.js +++ b/packages/lib/jest.config.js @@ -5,7 +5,6 @@ module.exports = { "\\.(png)$": "/test/mocks/pngMock.js", }, testMatch: ["**/?(*.)+(spec|test).[jt]s?(x)", "!**/?(*.)+(accessibility.)(spec|test).[jt]s?(x)"], - transformIgnorePatterns: ["/node_modules/(?!(jest-)?@cloudscape-design)/"], transform: { "^.+\\.[tj]sx?$": "babel-jest", }, diff --git a/packages/lib/package.json b/packages/lib/package.json index 5d5ffa93c..2e4521239 100644 --- a/packages/lib/package.json +++ b/packages/lib/package.json @@ -31,8 +31,7 @@ "peerDependencies": { "react": "^18.x", "react-dom": "^18.x", - "styled-components": "^5.0.1", - "@cloudscape-design/components": "3.0.677" + "styled-components": "^5.0.1" }, "dependencies": { "@radix-ui/react-popover": "^1.1.0",