@crave/farmblocks-table/lib/components.styled.js

A component for rendering data tables.

import styled from "styled-components";
import { colors, fontSizes, fontWeights } from "@crave/farmblocks-theme";
import Text from "@crave/farmblocks-text";
export const Table = styled.table.attrs(props => ({
  className: `${props.className || ""} ${props.$columnsTemplate ? "__asGrid" : ""}`
})).withConfig({
  displayName: "componentsstyled__Table",
  componentId: "sc-1t2mqy1-0"
})(["min-width:100%;overflow-x:scroll;border:none;border-spacing:0;@supports (display:contents){&.__asGrid{display:grid;grid-template-columns:", ";}}tr:hover td{background-color:", ";}"], ({
  $columnsTemplate
}) => $columnsTemplate, colors.SUGAR);
export const THead = styled.thead.withConfig({
  displayName: "componentsstyled__THead",
  componentId: "sc-1t2mqy1-1"
})([".__asGrid &{display:contents;}"]);
export const TBody = styled.tbody.withConfig({
  displayName: "componentsstyled__TBody",
  componentId: "sc-1t2mqy1-2"
})([".__asGrid &{display:contents;}"]);
export const TR = styled.tr.withConfig({
  displayName: "componentsstyled__TR",
  componentId: "sc-1t2mqy1-3"
})([".__asGrid &{display:contents;}"]);
export const TH = styled(Text).withConfig({
  displayName: "componentsstyled__TH",
  componentId: "sc-1t2mqy1-4"
})(["border:solid ", ";border-width:0 0 1px;padding:8px 16px;line-height:1.5;white-space:nowrap;"], colors.GREY_08);
TH.defaultProps = {
  as: "th",
  fontSize: fontSizes.SMALL,
  fontWeight: fontWeights.SEMIBOLD
};
export const TD = styled(Text).attrs(props => ({
  type: props.color
})).withConfig({
  displayName: "componentsstyled__TD",
  componentId: "sc-1t2mqy1-5"
})(["border-bottom:1px solid ", ";padding:8px 16px;line-height:1.5;height:64px;transition:background-color 0.2s ease-in-out;"], colors.GREY_08);
TD.defaultProps = {
  as: "td",
  truncate: true,
  fontSize: fontSizes.MEDIUM,
  color: colors.OYSTER
};
export const TDBold = styled(TD).withConfig({
  displayName: "componentsstyled__TDBold",
  componentId: "sc-1t2mqy1-6"
})(["font-weight:700;color:", ";"], colors.CARBON);