alicia-design-system 1.7.0 → 1.9.0

package/.storybook/preview.js

@@ -1,10 +1,9 @@
 import { addDecorator } from "@storybook/react";
 import { withThemesProvider } from "storybook-addon-styled-component-theme";
 
-import agosTheme from "../src/styles/theme";
 import { chakraTheme as theme } from "../src/styles/chakraTheme";
 
-addDecorator(withThemesProvider([agosTheme]));
+addDecorator(withThemesProvider([theme]));
 addDecorator((storyFn) => <div id="modal">{storyFn()}</div>);
 
 export const parameters = {

package/index.ts

@@ -1,4 +1,3 @@
-export * from "./src/styles/index";
 export * from "./src/alicia/common/Buttons";
 export * from "./src/alicia/common/Checkbox";
 export * from "./src/alicia/common/Header";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alicia-design-system",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "private": false,
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",

package/src/alicia/common/Buttons/Buttons.stories.tsx

@@ -5,7 +5,12 @@ import { Button } from "./Buttons";
 export default {
   title: "Alicia/Common/Buttons",
   component: Button,
-  argTypes: {},
+  argTypes: {
+    variant: {
+      options: ['solid','primary', 'secondary',],
+      control: { type: 'radio' },
+    },
+  },
 } as ComponentMeta<typeof Button>;
 
 const Template: ComponentStory<typeof Button> = (args) => {
@@ -15,7 +20,6 @@ const Template: ComponentStory<typeof Button> = (args) => {
 export const Primary = Template.bind({});
 
 Primary.args  = {
-  children: "Primary",
-  variant: "solid",
+  children: "Button Text",
   onChange: () => ({ variant: "primary" }),
 };

package/src/types/index.ts

@@ -1,4 +1,3 @@
 // Modules
 export * from "./general";
-export * from "styles/types";
 export * from "./route";

package/src/styles/index.ts

@@ -1,36 +0,0 @@
-import { createGlobalStyle } from "styled-components";
-
-const globalStyle = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-    min-height: 100%;
-    height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  *,
-  *::after,
-  *::before {
-    box-sizing: inherit;
-  }
-
-  body {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    font-family: ${({ theme }) => theme.fonts.notoSans};
-    background-color: ${({ theme }) => theme.colors.white.medium};
-    height: 100%;
-  }
-
-  #app {
-    height: 100%;
-  }
-
-  a {
-    text-decoration: none;
-  }
-`;
-
-export default globalStyle;

package/src/styles/react-toastify.css

@@ -1,25 +0,0 @@
-@import 'react-toastify/dist/ReactToastify.min.css';
-
-.Toastify__toast-container {
-  width: 450px;
-}
-
-.Toastify__toast {
-  border-radius: 4px;
-  font-family: 'noto-sans', sans-serif;
-}
-
-.Toastify__toast-body {
-  font-size: 14px;
-  margin: auto 10px;
-}
-
-.Toastify__toast--error {
-  background-color: #E5193D;
-  color: #FFE5EA;
-}
-
-.Toastify__toast--success {
-  background-color: #00CCB2;
-  color: #E9FBF9;
-}

package/src/styles/theme.ts

@@ -1,38 +0,0 @@
-const theme = {
-  colors: {
-    white: Object.assign("#FFFFFF", {
-      medium: "#F9F9F9",
-      dark: "#F4F5F2",
-    }),
-    black: Object.assign("#000000", {
-      light: "#4C4C4C",
-    }),
-    green: "#01a3a6",
-    gray: Object.assign("#989898", {
-      light: "#F4F4F4",
-    }),
-    primary: "#006A70",
-    primaryHover: "#4DBFC0",
-    primaryOff: "#F1FAFB",
-    secondary: "#292E5A",
-    secondaryHover: "#54587B",
-    red: "#DC3545",
-    orange: "#FF6000",
-    graph: {
-      primary: "#1D868A",
-      secondary: "#292E5A",
-      background: "#F4F9F9",
-      line: "#ECE9F1",
-      text: "#989898",
-    },
-  },
-  shadows: {
-    interactiveElement: "0px 1px 1px 0px rgba(0,0,0,0.1)",
-    overlay: "0px 2px 4px 0px rgba(0,0,0,0.1)",
-  },
-  fonts: {
-    notoSans: "noto-sans, sans-serif",
-  },
-};
-
-export default theme;

package/src/styles/types.ts

@@ -1,46 +0,0 @@
-import * as i from "../types";
-import { ThemedCssFunction } from "styled-components";
-import theme from "./theme";
-import { sizes } from "./utils";
-
-export type Theme = typeof theme;
-
-// Add Theme type to styled-components
-declare module "styled-components" {
-  export interface DefaultTheme extends i.Theme {}
-}
-
-export type BaseStyled = {
-  theme?: i.Theme;
-  className?: string;
-};
-
-// Get color strings from theme
-export type ThemeColors = keyof typeof theme.colors;
-
-// Get subcolors from colors if they exist
-export type SubThemeColors = {
-  [color in i.ThemeColors]: Exclude<
-    keyof typeof theme.colors[color],
-    keyof string
-  >;
-};
-
-// Ensures colors exist in theme
-export type ColorsFromTheme<Colors extends i.ThemeColors> = Colors;
-
-// Ensures subcolor exists in color object
-export type SubcolorsFromColor<Color extends i.ThemeColors> =
-  i.SubThemeColors[Color];
-
-// Ensures subcolor exists in theme
-export type SubcolorFromTheme<
-  Color extends i.ThemeColors,
-  Subcolor extends i.SubThemeColors[Color]
-> = [Color, Subcolor];
-
-export type MediaSizes = keyof typeof sizes;
-
-export type MediaUtils = {
-  [size in i.MediaSizes]: ThemedCssFunction<i.Theme>;
-};

package/src/styles/utils.ts

@@ -1,27 +0,0 @@
-import * as i from "../types";
-import { css } from "styled-components";
-
-export const sizes = {
-  large: 1200,
-  desktop: 992,
-  tablet: 768,
-  mobile: 480,
-} as const;
-
-export const media = Object.keys(sizes).reduce((accumulator, _label) => {
-  // use em in breakpoints to work properly cross-browser and support users
-  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
-  const label = _label as i.MediaSizes;
-  const emSize = sizes[label] / 16;
-
-  // @ts-expect-error
-  accumulator[label] = (...args: Parameters<typeof css>) =>
-    css`
-      @media (min-width: ${emSize}em) {
-        ${css(...args)};
-      }
-    `;
-
-  return accumulator;
-  // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter
-}, {} as i.MediaUtils);